//导入 createSlice
import {createAsyncThunk, createSlice} from '@reduxjs/toolkit';
import instance from '../../utils/http';

//创建一个异步的 action creator
//createAsyncThunk 用来创建异步的 action creator
// asyncAddTodo 接收到的实参, 将作为回调函数的实参  asyncAddTodo('abc')
export let asyncAddTodo = createAsyncThunk('todo/add', 
async (title) => {
  //这里编写异步代码
  let todo = await instance.post('/todos', {
    title: title,
    done: false
  });
  return todo;
});

//成功的 action dispatch({type: 'todo/add/fulfilled', payload: todo})
//失败的 action dispatch({type: 'todo/add/reject', payload: todo})

//声明 asyncGetTodos 异步的 action creator
export let asyncGetTodos = createAsyncThunk('todo/init', async () => {
  //完成异步任务
  let todos = await instance.get('/todos');
  //返回
  return todos;
});

//声明 asyncRemoveTodo
export let asyncRemoveTodo = createAsyncThunk('todo/remove', async (id) => {
  await instance.delete(`/todos/${id}`);
  return id;
});

//声明 asyncCheckTodo
export let asyncCheckTodo = createAsyncThunk('todo/check', async({id, done}) => {
  //发送请求更新任务的完成状态
  await instance.patch(`/todos/${id}`, {done: done});
  return {id, done};
});

//创建 slice 对象
let slice = createSlice({
  name: 'todo',
  initialState: {
    value: []
  },
  reducers: {
  },
  //extra 额外的
  extraReducers: builder => {
    // add 新增  case 具体情况
    // asyncAddTodo 任务成功的处理
    builder.addCase(asyncAddTodo.fulfilled, (state, action) => {
      state.value.push(action.payload);
    }).addCase(asyncAddTodo.rejected, (state, action) => {
      console.log('任务失败~~~');
    }).addCase(asyncGetTodos.fulfilled, (state, action) => {
      //当获取数据的任务完成之后, 更新 redux 中的任务数据
      state.value = action.payload;
    }).addCase(asyncRemoveTodo.fulfilled, (state, action) => {
      //删除 任务列表中指定 id 的数据
      state.value = state.value.filter(item => item.id !== action.payload);
    }).addCase(asyncCheckTodo.fulfilled, (state, action) => {
      //更新
      state.value.forEach(item => {
        //检测当前任务的 id 是否与要更新的 id 相同
        if(item.id === action.payload.id){
          item.done = action.payload.done;
        }
      })
    });
  }
});

//获取 reducer 函数
let todoReducer = slice.reducer;

// 暴露
export default todoReducer;

//封装异步的 action creator   
// export function asyncGetTodos(){
//   return async dispatch => {
//     //异步的操作
//     let todos = await instance.get('/todos');
//     //dispatch
//     dispatch(init(todos));
//   }
// }

//封装异步的 action creator 新增任务
// export function asyncAddTodo(title){
//   return async dispatch => {
//     //异步操作
//     let todo = await instance.post('/todos', {title: title, done: false});
//     //同步的更新 redux 状态 add(todo) 
//     console.log(add(todo));
//     dispatch(add(todo)); 
//   }
// }

//删除任务
// export function asyncRemoveTodo(id){
//   return async dispatch => {
//     //编写异步任务
//     await instance.delete(`/todos/${id}`);
//     //更新 redux 中的状态
//     dispatch(remove(id));// {type: 'remove', payload: id}
//   }
// }

//更新任务的完成状态
// export function asyncCheckTodo(id, done){
//   return async dispatch => {
//     //发送请求
//     await instance.patch(`/todos/${id}`, {done: done});
//     //更新 redux 的状态
//     dispatch(check({id, done}));
//   }
// }

